<!-- You can custom the "mySwiper" name used to find the swiper instance in current component -->
<template>
<div>
      <!-- swiper -->
      <swiper :options="swiperOption">
        <!--远程轮播开始-->
        <div class="swiper-slide" v-for="banner in banners">
          <img :src="banner">
        </div>
        <!--暂时本地轮播结束-->
        <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
      </swiper>
</div>
</template>

<script>
require('swiper/dist/css/swiper.css')
import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    data () {
      return {
        swiperOption: {  
              spaceBetween: 30,
              autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              }
        }, 
      }
    },
    props:{
      banners: {
        type: Array,
        default: []
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {  
        // swiper() {  
        //   return this.$refs.mySwiper.swiper;  
        // } 
    },
    ready(){
      console.log("banenrs="+this.banners);
    },  
    mounted() {
     
      // this.$api.Banner().then(res => {
      //   if(res.code==0){
      //     var bannerList = [];
      //     var bannerArr = res.data;
      //       //banners
      //     for(var i=0;i<bannerArr.length;i++){
      //       bannerList.push(bannerArr[i].picUrl);
      //     } 
      //     this.banners = bannerList;
      //   }
      // })
      // .catch(error => {
      //     console.log(error)
      // })
  
    }
  }
</script>

<style scoped>

.swiper-container{
  width: 100%;
}
.swiper-slide img{
  width: 100%;
}

</style>


